<template>
    <div class='content'>
        <div class="profile_page">
                <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
        </div>
        <div class="formContain">
            <titlebar :title-left='titleLeft'></titlebar>
            <ul>
                <li class="flex">
                    <span class="label"><i class="require">*</i>原密码</span>
                  <div>
                    <van-field  v-model="originPassword" placeholder="请输入原密码" type="text" input-align="right"/>
                  </div>
                </li>
                 <li class="flex">
                    <span class="label"><i class="require">*</i>新密码</span>
                   <div>
                     <van-field  v-model="newpassword" placeholder="请输入新密码" type="text" input-align="right"/>
                   </div>
                </li>

                  <li class="flex">
                    <span class="label"><i class="require">*</i>再次输入新密码</span>
                    <div>
                        <van-field  v-model="againpassword" placeholder="请再次输入新密码" type="text" input-align="right"/>
                    </div>
                </li>

            </ul>

        </div>

         <div class="align_center foot-button" >
              <van-button class="cancel-btn" type="primary" @click="$router.go(-1)">取消</van-button>
            <van-button class="primary-btn" type="primary" @click="saveData">提交</van-button>
         </div>
    </div>
</template>

<script>
    import headTop from '@/components/header/head'
     import titlebar from '@/components/titlebar3/titlebar3';
    import {updatePassword} from '@/service/getData';
    import {getStore,getDefault} from '@/assets/config/mUtils';
    import { Dialog,Toast } from 'vant';
    export default {
    	data(){
            return{
                goBack:true,
                titleLeft:'修改密码',
                profiletitle:'修改密码',
                screenHeight:'',
                originPassword:'',
                newpassword:'',
                againpassword:'',
            }
        },
        created(){

        },
        mounted(){
          this.screenHeight = document.documentElement.clientHeight
        },
        components:{
            headTop,
            titlebar
        },
      updated () {
        let that = this;
        this.$nextTick(function () {
          let $inputs = Array.from(document.getElementsByTagName('input'));
          /*let body = document.body;
          $inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题，可省略
              item.onblur = function () { // onblur是核心方法
                  clearTimeout(body.timer);
                  body.timer = setTimeout(() => {
                  window.scroll(0, 0);
                  window.innerHeight = window.outerHeight = that.screenHeight
                  }, 150)
              }
              item.onfocus = function () {
                  clearTimeout(body.timer)
              }
          })*/
          let body = document.body;
          $inputs.forEach(item => {
            item.onblur = function () { // onblur是核心方法
              window.scroll(0, 0);
              window.innerHeight = window.outerHeight = that.screenHeight;
              //console.log(that.screenHeight);
            }
          })
        })
      },
        methods:{
            saveData(){
              if(this.originPassword ==''||this.newpassword==''||this.againpassword==''){
                Dialog.alert({
                  title: '提示',
                  message: '原密码或者新密码不能为空'
                });
              }else {
                if(this.newpassword != this.againpassword){
                  Dialog.alert({
                    title: '提示',
                    message: '两次新密码不一致'
                  });
                }else {
                  var data = {};
                  data.app_userId = getStore('user_id');
                  data.CHECK_TIME = new Date().getTime();
                  data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
                  data.originalPwd = this.originPassword;
                  data.loginPwd = this.newpassword;
                  updatePassword(data).then(res=>{
                    if(res.code == 200){
                      Dialog.alert({
                        title: '提示',
                        message: '密码修改成功'
                      }).then(() => {
                        this.$router.go(-1);
                        /*this.$router.push({
                          path: '/userInfo',
                        })*/
                      });
                    }else if(res.code == 400){
                      Dialog.alert({
                        title: '提示',
                        message: res.msg
                      });
                    }
                  })
                }

              }

            },
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
    .formContain{
        background: #fff;
        ul{
            padding: 0 .54rem;
            .flex{
                justify-content: space-between;
                align-items: center;
                line-height: 2rem;
                border-bottom: 1px solid #e0e0e0;
                padding: 0 .3rem;
                &:nth-last-of-type(1){
                    border: none;
                }
                .label{
                    font-size: .56rem;
                    line-height: 2rem;
                    color: #333333;
                }
                div{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    position: relative;
                    flex-grow: 1;
                    img{
                        width: .68rem;
                        height: .64rem;
                    }
                    input{
                        color: #323233;
                        text-align: right;
                        font-size: .48rem;
                        padding-right: .48rem;
                        border: none;
                        &:-ms-input-placeholder{
                             color: #aaa;
                             font-size: .48rem;

                        }
                    }
                    .file{
                        width: 2rem;
                        height: 1rem;
                        font-size: 10rem;
                        opacity: 0;
                        position: absolute;
                        right: 0;
                    }
                    .van-cell{
                        font-size: .48rem;
                        padding-right: .48rem;
                        padding: 0;
                        color: #aaa;
                        .van-field__control{
                            color: #aaa;
                        }
                    }

                }
            }
        }
    }
    .foot-button{
        margin-top: 2rem;
        margin-bottom: .4rem;
        .cancel-btn{
            margin-right: 1rem;
        }
    }
    #datetime-picker,#picker{
        position: fixed;
        width: 100%;
        bottom: 0;
    }
  .require{
    color: red;
    margin-right: 4px;
    font-style: inherit;
    font-size: 14px;
  }
</style>
